import React, { useEffect, useState } from 'react';
//小图标
import { PieChartOutlined } from '@ant-design/icons';
//引入antd组件按需引入
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { menuApi } from '../apis/menuApi';
import { useLocation } from 'umi';

export default function MyMenu(props: any) {
  const [menu, setMenu] = useState([]);
  const location: any = useLocation();

  useEffect(() => {
    const username = sessionStorage.getItem('username');
    if (username) {
      feachData(username);
    }
  }, [location]);
  //发送请求获取菜单数据
  const feachData = async (username: string) => {
    const res = await menuApi(username);
    setMenu(res);
  };

  return menu.map((item: any, index: number) => {
    if (item.name === '主页') {
      // console.log(item);
      item.children.map((children: any, index: number) => {
        children.label = <Link to={children.path}>{children.name}</Link>;
        children.key = children.path;
        if (children.children) {
          children.children.map((children: any, index: number) => {
            children.label = <Link to={children.path}>{children.name}</Link>;
            children.key = children.path;
          });
        }
      });
      return (
        <Menu
          key={item.path + index}
          theme={'dark'}
          style={{
            width: '100%',
          }}
          defaultOpenKeys={['sub2', 'sub1']}
          defaultSelectedKeys={['1']}
          mode="inline"
          items={item.children}
        ></Menu>
      );
    } else if (item.name === '404') {
      <Menu.Item key={item.path + index} icon={<PieChartOutlined />}>
        <Link to="*"> 系统错误</Link>
      </Menu.Item>;
    }
  });
}
